<template>
  <el-row>
    <!-- 用于将画面挤到中间 -->
    <el-col :span="3" style="height: 10px;"></el-col>
    <el-col :span="18">
      <div class="mainContent">
        <el-form :model="form" :rules="rules" ref="form" label-width="200px">
          <!-- 普通文本输入 -->
          <el-form-item label="ncomps" prop="ncomps">
            <el-input v-model.number="form.ncomps" style="width: 100%"></el-input>
          </el-form-item>
          <!-- 下拉选择输入 -->
          <el-form-item label="scaling-type">
            <el-select v-model="form.scaling_type" placeholder="请选择缩放的尺度" style="width: 100%">
              <el-option label="0" value="0"></el-option>
              <el-option label="0.5" value="0.5"></el-option>
              <el-option label="1" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="outlier comps" prop="outlier_comps">
            <el-input v-model.number="form.outlier_comps" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="outlier measure">
            <el-select v-model="form.outlier_measure" placeholder="请选择寻找离群点的标的">
              <el-option label="T2" value="T2"></el-option>
              <el-option label="DmodX" value="DmodX"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="outlier alpha" prop="outlier_alpha">
            <el-input v-model="form.outlier_alpha" style="width: 100%"></el-input>
          </el-form-item>
          <!-- 目前使用后会打乱原有标签 -->
          <!-- <el-form-item label="outliers index" prop="outliers_index">
            <el-input v-model="form.outliers_index"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit" v-if="submitFlag">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <!-- 展示返回图片 -->
        <div class="show-image">
          <div class="block" v-for="(image,num) in imageList" :key="num">
            <el-row :gutter="20">
              <el-col>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>Outlier Plot</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="downLoadImg(image.url)">下载图片
                    </el-button>
                  </div>
                  <div v-for="(item,key,index) in image" :key="index" class="text item">
                    <div v-if="key != 'url'">{{key + ':' + item}}</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
   import passerby from "@/api/user";
  import pca from "@/api/pca";
  export default {
    data() {
      // 一些验证的规则，跟着改就行
      var checkNComps = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('个数不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value > this.FileShape1) {
              callback(new Error('必须小于最大维度'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var checkOutlierComps = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('个数不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {

          } else {
            if (value > this.FileShape1) {
              callback(new Error('必须小于最大维度'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var checkOutlierAlpha = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        }
        setTimeout(() => {
          let reg = /^0\.(\d+)$|^1$/g;
          if (value === '') {
            callback(new Error('请输入内容'));
          } else if (!reg.test(value)) {
            callback(new Error('请输入小于1的数字'));
          } else {
            callback();
          }
        }, 1000);
      };
      return {
        // 分析数据的维度
        FileShape1: 0,
        // 分析数据样本的个数
        FileShape2: 0,
        // 标签的类别个数
        FileShape3: 0,
        // 根据数据是否合理，能否进行提交
        submitFlag: false,
        // 表单的数据
        form: {
          ncomps: 2,
          scaling_type: 0,
          dpi: 500,
          outlier_comps: "None",
          outlier_measure: "T2",
          outlier_alpha: 0.05,
          outliers_index: "None",
        },
        // element表单的一些验证规则
        rules: {
          ncomps: [
            {
              required: true,
              type: "integer",
              message: "请输入一个整数",
              trigger: "blur",
            },
            { validator: checkNComps, trigger: 'blur' }
          ],
          outliers_comps: [
            {
              required: true,
              message: "请输入寻找离群点的维度",
              trigger: "blur",
            },
            {
              pattern: /^\d*$|^None$/,
              message: "格式不对",
              trigger: "blur",
            },
            { validator: checkOutlierComps, trigger: 'blur' }
          ],
          outlier_alpha: [
            {
              required: true,
              message: "请输入一个小于一的数",
              trigger: "blur",
            },
            { validator: checkOutlierAlpha, trigger: 'blur' }
          ],
          outliers_index: [
            {
              required: true,
              message: "请输入离群点",
              trigger: "blur",
            },
            {
              pattern: /^(\d*,)*\d*$|^None$/,
              message: "格式不对",
              trigger: "blur",
            },
          ],
        },
        imageList: [],
      };
    },
    mounted() {
      // 在开始分析之前进行验证数据的合理性
      this.getState()
    },
    methods: {
      // 获取数据是否合理
      getState() {
        passerby.isPrepared()
        .then((res) => {
          this.FileShape1 = res.data.data.FileShape1;
          this.FileShape2 = res.data.data.FileShape2;
          this.FileShape3 = res.data.data.FileShape3;
          this.submitFlag = true;
        })
        .catch(() => {
          this.$router.replace("/metabo/differential_analysis/upload_file");
        });
      },
      // 提交表单
      onSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            //如果通过验证 to do...
            var tempForm = JSON.parse(JSON.stringify(this.form))
            pca.PCAOutlier(this.form).then((response) => {
              tempForm.outlierIndex = response.data.data.outlierIndex
              this.imageList.push(tempForm);
            });
          } else {
            this.$message.error("表单出错啦")
            return false
          }
        })
      },
      // 获取图片
      downLoadImg(url) {
        window.open(url)
      },
    },
  };
</script>
<style>
  .mainContent {
    max-width: 1000px;
  }
</style>